<template>
    <!-- 
        页面以 QS （勤瘦） 为主命名
        每个页面再根据页面内容，添加不同命名后续 （如登录页 - loading）
        页面内命名都以本页面主题为开头，加功能后缀 如：loading-confirm-btn
        本页面主题:infoList
     -->
    <div class="QS-content-template QS-infoList">
        <div class="makeFoods_label">
            <!-- <span class="makeFoods_label_tip">商品名称</span> -->
            <div class="makeFoods_input">
                <el-input 
                    v-model="serachVal"
                    placeholder="请输入作者名称搜索"
                    clearable
                ></el-input>
            </div>
            <el-button class="infoList_btn infoList_search" type="primary">搜索</el-button>
            <el-button @click="addInformation" class="infoList_btn infoList_add" type="primary">添加</el-button>
        </div>
        <div class="infoList_box">
            <div v-for="(item,index) in infoListObj" :key="index" class="infoList_label">
                <el-image 
                    class="infoList_image"
                    :src="$commonFunc.checkThePic(item.newPictireAddress)" 
                    :preview-src-list="[$commonFunc.checkThePic(item.newPictireAddress)]">
                </el-image>
                <h3>{{item.author}}</h3>
                <p>{{item.newsBriefText}}</p>
                <div class="infoList_console">
                    <!-- 删除按钮 -->
                    <!-- <i @click="delInfoList(item)" class="infoList_del el-icon-delete"></i> -->
                    <el-button class="infoList_del el-icon-delete" type="text" @click="delInfoList(item)"></el-button>
                    <el-button class="infoList_edit el-icon-edit" type="text" @click="editInfoList(item)"></el-button>
                    
                    <div class="infoList_public_box">
                        <el-tooltip 
                            class="item infoList_public" 
                            effect="dark" 
                            :content="item.officialAccounts" 
                            placement="top-start">
                            <el-button>
                                <!-- 关联公众号图标 -->
                                <i class="el-icon-more"></i>
                                <!-- <img class="infoList_public_icon" :src="item.publicIcon" alt=""> -->
                            </el-button>
                        </el-tooltip>

                    </div>
                </div>
            </div>
        </div>



        <!-- <el-dialog
            title="添加资讯"
            :visible.sync="dialogVisible"
            width="70%">
            <div class="mall_add">
                <QSInformation
                    :key="new Date().getTime()"
                    :subData="subData"
                    @getAllInformationList="getAllInformationList"
                ></QSInformation>
            </div>
        </el-dialog> -->
    </div>
</template>

<script>
import QSInformation from '@/views/QSInformation';
export default {
	components: {
        QSInformation
	},
	data(){
		return {
            serachVal:'',//搜索条件
            infoListObj:[],//获取资讯列表数据
            dialogVisible:false,//dialog flag
            subData:{},
		}
    },
    mounted(){

        this.getAllInformationList(0);
    },
    methods:{
        // this.$router.push('/GDPLHasReturned');
        delInfoList(item){//删除按钮
            this.$confirm('是否删除该咨询信息?', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // type: 'warning'
            }).then(() => {
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
                this.delInformation(item.id);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        editInfoList(item){
            this.subData.item = item;
            // this.dialogVisible = true;
            this.$router.push({
                name:'QSInformation',
                query: {
                    asubData:this.subData
                }
            })
        },
        addInformation(){//添加显示弹框
            this.subData.item = {};
            // this.dialogVisible = true;
            this.$router.push({
                name:'QSInformation',
                query: {
                    asubData:null
                }
            })
        },
        getAllInformationList(page){
            this.$fetch("newsList/findlist",{
                page:page ? page.toString() : '0',//第几页
                Size:'10',//每页大小
                isDeleted:'N',//查找未删除的数据
                // author:'',//作者
                // Sort:'',//排序字段,方式
                // officialAccounts:'',//关联的公众号
            }).then(res=>{
                console.log(res)
                this.infoListObj.splice(0);
                for(var i = 0;i < res.rows.length;i ++){
                    this.infoListObj.push({
                        id:res.rows[i].id || '',//主键
                        newPictireAddress:res.rows[i].newPictireAddress || '',//资讯图片地址
                        srcList: [//预览图片，可多个
                            res.rows[i].newPictireAddress || 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg'
                        ],
                        newSourceAddress:res.rows[i].newSourceAddress || '',//资讯原链接地址
                        newsBriefText:res.rows[i].newsBriefText || '',//资讯简介文本
                        gmtCreate:res.rows[i].gmtCreate || '',//创建时间
                        gmtModifier:res.rows[i].gmtModifier || '',//修改时间
                        newsWeights:res.rows[i].newsWeights || '',//权重参数
                        author:res.rows[i].author || '',//作者
                        officialAccounts:res.rows[i].officialAccounts || '',//关联的公众号
                    });
                }

                // this.dialogVisible = false;
            })
        },
        delInformation(id){
            console.log(id)
            this.$post("newsList/save",{
                id:id || '',//主键
                newPictireAddress:'',//资讯图片地址
                newSourceAddress:'',//资讯原链接地址
                newsBriefText:'',//资讯简介文本
                // newsWeights:'',//权重参数
                isDeleted:'Y',//是否删除
                author:'',//作者
                // officialAccounts:'',//关联的公众号
            }).then(res=>{
                console.log(res)
                this.getAllInformationList(0);
            })
        }
    }
}
</script>